<template>
  <el-dialog
    :title="title"
    v-model="visible"
    class="html-preview-window"
    :width="width"
    draggable
  >
    <div class="content-preview" v-html="content"></div>
  </el-dialog>
</template>

<script>
export default {
  name: 'HtmlPreviewWindow',
  props: {
    // v5.1.4新增
    width: {
      default: '800px'
    }
  },
  data () {
    return {
      visible: false,
      // 标题
      title: '',
      // 内容
      content: ''
    }
  },
  methods: {
    /**
     * 打开窗口
     *
     * @param title 标题
     * @param content 内容
     */
    open (title, content) {
      this.title = title
      this.visible = true
      this.content = content
    }
  }
}
</script>

<style lang="scss">
.html-preview-window {
  .el-dialog__header {
    border-bottom: 1px solid #eee;
  }
  // 内容预览
  .content-preview {
    overflow: auto;
  }
}
</style>
